<!--
 * @Author: weikang
 * @Description:
 * @Date: 2023-12-22 22:43:05
 * @LastEditTime: 2024-03-20 21:01:19
 * @FilePath: \env-manager-pc\src\views\contract\statistics\zhanbi.vue
-->
<script setup lang="ts">
import * as Echarts from 'echarts'
import useDashboardStore from '@/store/modules/dashboard'

const dashboardStore = useDashboardStore()

const option = computed(() => {
  return {
    title: {
      subtext: '单位：万元',
      left: 'left',
      top: 0,
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      top: 50,
    },
    series: [
      {
        name: '合同金额占比',
        type: 'pie',
        radius: '80%',
        data: dashboardStore.contractDashboard?.OwnerOrgClassifys?.map((item: any) => ({
          name: item.OwnerOrgClassifyName,
          value: item.ContractNum,
        })) || [],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }
})

const chartRef = ref<any>()
let chart: any = null
onMounted(() => {
  chart = Echarts.init(chartRef.value)
  chart.setOption(option.value)
  window.addEventListener('resize', () => {
    chart.resize()
  })
})

dashboardStore.$subscribe((mutation, state) => {
  if (state.contractDashboard?.OwnerOrgClassifys) {
    chart.setOption(option.value)
  }
})
</script>

<template>
  <PageMain title="最近12月企业安装情况">
    <div ref="chartRef" class="h-[30vh] min-h-[300px] w-full overflow-hidden" />
  </PageMain>
</template>
